<template>
  <div>
    <!-- <Header></Header> -->
    <div class="login">
      <div class="tab">
        <div class="tab-content">
          <img src="../../assets/images/logo.jpg" alt @click="$router.push('/')">
          <span class="tj">讨教</span>
          <span class="txz">通行证</span>
        </div>
      </div>
      <div class="banner">
        <img src="../../assets/images/bg.jpg" alt class="bg">
        <div class="login_bg">
          <div class="login_bg_main">
            <h3>登录</h3>
            <p>讨教 | 通行证</p>
            <div class="photo">
              <span>
                <i class="iconfont icon-all-shouji"></i>
              </span>
              <input type="text" placeholder="手机号" v-model="number">
            </div>
            <div class="password">
              <span>
                <i class="iconfont icon-all-mima"></i>
              </span>
              <input type="password" placeholder="登录密码" v-model="psw">              
            </div>
             <p v-if="text" class="box">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>{{defaultCode}}</em>
          </p>
            <div class="btn" @click="login">立即登录</div>
            <div class="msg">
              <div>没有账号？</div>
              <div class="register" @click="$router.push('/register')">立即注册</div>
              <div class="psw" @click="$router.push('/password')">忘记密码？</div>
            </div>
            <div class="sj">社交网络登录</div>
            <div class="btn" style="margin-top:40px;">
              <i class="iconfont icon-all-weixin"></i>
              使用微登录
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "login",
  data() {
    return {
      defaultCode: "请输入有效的手机号码",
     text:false,
     number:"",
     psw:'',
    };
  },
  mounted(){
     this.phoneReg = /^1[34578]\d{9}$/;
  },
   methods: {
      login(){
         if (!this.phoneReg.test(this.number)){
           this.text = true;
           return;
         }
         if(this.psw === ''){
           this.defaultCode ='密码不能为空'
           this.text =true;
           return;
         }
         let param = {
             login_password :this.psw,
             mobile: this.number,
         }
         this.$axios
        .post("api/App/User/Register/login", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          if(res.data.status == 1) 
          {
            this.setCookie("token", encodeURIComponent(res.data.data.rong_token, "utf-8"));
            this.setCookie(
              "userName",                     
              encodeURIComponent(res.data.data.nickname, "utf-8"),
            );
            this.setCookie(
              "nm_avatar",
              encodeURIComponent(res.data.data.nm_avatar, "utf-8"),
            );           
            this.setCookie(
              "member_id",
              encodeURIComponent(res.data.data.member_id, "utf-8")
            );
            this.setCookie(
              "identity_type",
              encodeURIComponent(res.data.data.identity_type, "utf-8")
            );
            this.$router.push("/");
          }
          else if(res.data.status === "0")
          {
            this.defaultCode ='用户不存在或密码错误';
            this.text =true;
          }
          else 
          {
            this.defaultCode = '请求错误';
            this.text =true;
          }        
        });

      } 
   },
  components: {}
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  background: #d8d9d9;
  margin-top: -60px;
  height: 770px;
  .tab {
    //  width: 80%;
    //  margin: 0 auto;
    background: #fff;
    height: 70px;
    // z-index: 100;
    .tab-content {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      img {
        width: 60px;
        height: 60px;
        margin-top: 5px;
      }
      .tj {
        height: 40px;
        width: 60px;
        margin-top: 10px;
        line-height: 40px;
        //  padding-left:0px;
        margin-left: 20px;
        border-right: 1px solid #666;
        font-size: 18px;
      }
      .txz {
        height: 40px;
        width: 60px;
        margin-top: 10px;
        line-height: 40px;
        padding-left: 10px;
        font-weight: 900;
      }
    }
  }
  .banner {
    // margin-top:-70px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .bg {
      position: absolute;
      top: 0px;
      left: 0;
    }
    .login_bg {
      width: 1120px;
      border-radius: 2px;
      margin: 60px auto 0;
      min-height: 654px;
      position: relative;
      background: url(../../assets/images/bg1.png) no-repeat;
      display: flex;
      flex-direction: row-reverse;
      .login_bg_main {
        padding-top: 60px;
        width: 400px;
        h3 {
          font-size: 22px;
          color: #000;
          font-weight: 700;
          letter-spacing: 2px;
        }
        p {
          font-size: 16px;
        }
        .sj {
          // padding-top: 20px;
          color: #c3c5c7;
          text-align: center;
          display: block;
          width: 60%;
          margin: 0 auto;
          background: url(../../assets/images/line.png) no-repeat center;
          margin-bottom: 4px;
        }
        .box {
        height: 25px;
        width: 60%;
        margin: 0 auto;
        font-size: 12px;
        color: red;
        line-height: 25px;
        border: 1px solid #fc4c24;
        margin-top: 10px;
        }
        .msg {
          padding-bottom: 20px;
          padding-top: 10px;
          width: 60%;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #c3c5c7;
          .register {
            color: #666;
            margin-left: -60px;
            &:hover {
              color: #4786ff;
            }
          }
          .psw {
            color: #666;
            &:hover {
              color: #4786ff;
            }
          }
        }
        .photo {
          height: 40px;
          width: 60%;
          margin: 0 auto;
          border: 1px solid #cdcfd1;
          display: flex;
          justify-content: space-between;
          border-radius: 3px;
        }
        .password {
          height: 40px;
          width: 60%;
          margin: 0 auto;
          border: 1px solid #cdcfd1;
          display: flex;
          justify-content: space-between;
          border-radius: 3px;
          margin-top: 20px;        
        }
        span {
          display: block;
          width: 15%;
          border-right: 1px solid #cdcfd1;
          i {
            font-size: 25px;
          }
        }
        input {
          width: 85%;
          border: 0;
          outline: none;
          padding: 0 20px;
        }
        input::-webkit-input-placeholder {
          color: #666;
          font-size: 12px;
          padding-right: 10px;
          letter-spacing: 2px;
        }
        input:-moz-placeholder {
          color: #666;
          font-size: 12px;
          padding-right: 10px;
          letter-spacing: 2px;
        }
        input:-ms-input-placeholder {
          color: #666;
          font-size: 12px;
          padding-right: 10px;
          letter-spacing: 2px;
        }
        .btn {
          height: 40px;
          width: 60%;
          margin: 0 auto;
          background: #4786ff;
          font-size: 16px;
          color: #fff;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>


